<template>
  <div class="all">
    <Back title="理财宝"></Back>
    <div class="a">
      <p class="p1">全部产品</p>
      <div class="header">
        <p class="p2">稳定生息</p>
        <p class="p2">稳定增强</p>
        <p class="p2">活动专区</p>
        <p class="p2"></p>
      </div>

      <div class="search">
        <input type="text" placeholder="搜索币种">
      </div>

      <div class="products">
        <div v-for="data in datas" :key="data.id" class="pr1">
          <a href="/money">
            <div class="head1">
              <input type="hidden" :value="data.yield" :id="`${data.name}_yield`"/>
              <img :src="data.icon"/>
              <p>{{ data.name }}</p>
            </div>
            <div class="mid">
              <p class="p4" :id="`${data.name}_rate`" style="color: crimson">{{ currentRates[data.id] }}%</p>
              <p class="p3" :id="`${data.name}_cycle`">{{ data.selectedCycle || currentCycle(data) }}天</p>
              <p class="p5" style="transform: scale(0.90)">参考年化</p>
              <p class="p6" style="transform: scale(0.90)">投资期限</p>
            </div>
          </a>
          <div class="button">
            <div
                v-for="(cycle, index) in data.cycle"
                :key="index"
                @click="selectCycle(data, cycle)"
                class="b1"
                tabindex="1"
                style="text-align: center"
            >
              {{ cycle === 0 ? '活期' : cycle + '天' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Back from "../../components/BackNavbar.vue";
import {reactive, ref} from 'vue';
import { wealthManagement} from "../../apis/api.js";

const datas = ref([
  {
    "id": 3,
    "name": "BCT",
    "yield": [1.1, 2.1, 3.11, 4.1, 0.11],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/btc.png",
    "selectedCycle": null // 新增属性来存储当前选择周期
  },
  {
    "id": 5,
    "name": "ETH",
    "yield": [1.2, 2.2, 3.22, 4.2, 0.22],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/eth.png",
    "selectedCycle": null
  },
  {
    "id": 7,
    "name": "GT",
    "yield": [1.3, 2.3, 3.33, 4.3, 0.33],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/gt.png",
    "selectedCycle": null
  },
  {
    "id": 8,
    "name": "XRP",
    "yield": [1.4, 2.4, 3.44, 4.4, 0.44],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/xrp.png",
    "selectedCycle": null
  },
  {
    "id": 9,
    "name": "STARL",
    "yield": [1.5, 2.5, 3.55, 4.5, 0.55],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/starl.png",
    "selectedCycle": null
  },
  {
    "id": 10,
    "name": "LOOM",
    "yield": [1.6, 2.6, 3.66, 4.66, 0.66],
    "cycle": [7, 30, 180, 360, 0],
    "icon": "src/assets/dc/loom.png",
    "selectedCycle": null
  }
]);

// const currentRate = (data) => {
//   return data.yield ? data.yield[0] : 0;
// };

const currentCycle = (data) => {
  return data.cycle ? data.cycle[0] : 0;
};

const getRateData = ref({
  day: 0,
  currencyId: 0,
})
const currentRates = reactive({});
const selectCycle = (data, cycle) => {
  data.selectedCycle = cycle === 0 ? '活期' : cycle; // 更新选中的周期
  getRateData.value.day = cycle;
  getRateData.value.currencyId = data.id;
  wealthManagement(getRateData.value).then(res => {
    currentRates[data.id] = res.data.data;
  })
};
</script>

<style scoped>
.all {
  width: 500px;
  height: auto;
  display: flex;
  justify-content: left;
}

.a {
  margin: 10px 0 0 10px;
  width: 500px;
  height: 600px;
}

.p1 {
  font-size: 14px;
  margin-top: 15px;
}

.p2 {
  color: dimgrey;
  font-size: 10px;
  margin-top: 15px;
}

.products {
  background-color: #F9F9F9;
  width: 480px;
  padding-bottom: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

input {
  border: 0px;
  opacity: 0.3;
  font-size: 10px;
  width: 480px;
  height: 20px;
  margin-top: 10px;
  border-radius: 10px;
  background-color: gainsboro;
}

.pr1 {
  background-color: white;
  height: 110px;
  width: 480px;
  margin-top: 10px;
  padding-bottom: 10px;
}

img {
  width: 25px;
  height: 25px;
  margin-top: 5px;
  margin-left: 5px;
}

.head1 p {
  margin-left: 35px;
  margin-top: -28px;
}

.p3 {
  color: #FF0000;
  margin-left: 355px;
  margin-top: -33px;
  font-size: 13px;
}

.p4 {
  margin-left: 7px;
  font-size: 13px;
  margin-top: 15px;
}

.p5 {
  font-size: 7px;
  color: #B7B7B7;
  margin-left: -13px;
  margin-top: 13px;
}

.p6 {
  font-size: 7px;
  color: #B7B7B7;
  margin-left: 330px;
  margin-top: -5px;
}

.b1 {
  height: 25px;
  width: 50px;
  border-radius: 3px;
  background-color: #F8F9FB;
  font-size: 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}

.b1:focus {
  color: #FF0000;
  background-color: #F9FAFC;
}

a {
  text-decoration: none;
}
</style>